<template>
	<div class="home">
		<!-- 顶部区域 -->
		<div class="top-part">
			<img src="@/assets/images/home/bg2.png" class="bg" />
			<div class="one ml-20" @click="goLink('message')">
				<img src="@/assets/images/home/ic_topbg.png" class="middleBg" />
				<div class="v1">
					<div class="v2">
						<img src="@/assets/images/home/gonggao.png" class="miniBg" />
						<van-badge :content="messageNum > 99 ? '...' : messageNum" v-if="messageNum > 0" />
					</div>
					消息提醒
				</div>
			</div>

			<div class="one ml-10 mr-10" @click="goAnnunciate">
				<img src="@/assets/images/home/ic_topbg.png" class="middleBg" />
				<div class="v1">
					<div class="v2">
						<img src="@/assets/images/home/gonggao.png" class="miniBg" />
						<van-badge :content="noticeNum > 99 ? '...' : noticeNum" v-if="noticeNum > 0" />
					</div>
					通知公告
				</div>
			</div>

			<div class="one mr-20" @click="goLink('myApproval')">
				<img src="@/assets/images/home/ic_topbg.png" class="middleBg" />
				<div class="v1">
					<div class="v2">
						<img src="@/assets/images/home/shenhe.png" class="miniBg" />
						<van-badge :content="waitApprovalNum > 99 ? '...' : waitApprovalNum"
							v-if="waitApprovalNum > 0" />
					</div>
					待审批
				</div>
			</div>
		</div>

		<!-- 待领取物品提醒 -->
		<div style="margin-top: -30px" v-if="getGoodsArr[0]">
			<div class="notice" v-for="item in getGoodsArr" :key="item.id" v-if="hasRole('251')"
				@click="goGetGoodsDetail(item.id)">
				<div>
					<img src="@/assets/images/home/lingdang.png" class="lingdang" />
					<span>您有物品待领取</span>
				</div>
				<span class="look">查看详情>></span>
			</div>
		</div>

		<!-- 物品领用管理 -->
		<div class="apply-container" v-if="hasRole('187') || hasRole('251')">
			<span class="tit">物品领用管理</span>
			<div class="part">
				<div v-if="hasRole('187')" @click="goLink('purchaseControl')">
					<img src="@/assets/images/home/jinhuo.png" />
					<span>进货管理</span>
				</div>
				<div v-if="hasRole('187')" @click="goLink('stockInquiry')">
					<img src="@/assets/images/home/kucun.png" />
					<span>库存查询</span>
				</div>
				<div v-if="hasRole('187')" @click="goLink('outputLog')">
					<img src="@/assets/images/home/churu.png" />
					<span>出入库记录</span>
				</div>
				<div v-if="hasRole('251')" @click="goLink('goodsRequisitionLog')">
					<img src="@/assets/images/home/lingyong.png" />
					<span>物品领用记录</span>
				</div>
			</div>
		</div>

		<!-- 用车管理 -->
		<div class="apply-container" v-if="hasRole('252') || hasRole('120') || hasRole('121')">
			<span class="tit">用车管理</span>
			<div class="part">
				<div v-if="hasRole('252')" @click="goLink('carManagement/useCarRecord')">
					<img src="@/assets/images/home/yongche.png" />
					<span>用车记录</span>
				</div>
				<div v-if="hasRole('121')" @click="goLink('carManagement/dispatchRecord')">
					<img src="@/assets/images/home/paiche.png" />
					<span>派车记录</span>
				</div>
				<div v-if="hasRole('120')" @click="goLink('carManagement/myDispatchList')">
					<img src="@/assets/images/home/paichedan.png" />
					<span>我的派车单</span>
				</div>
				<div v-if="hasRole('121')" @click="goLink('carManagement/carList')">
					<img src="@/assets/images/home/cheguan.png" />
					<span>车辆管理</span>
				</div>
				<div v-if="hasRole('121')" @click="goLink('carManagement/driverList')">
					<img src="@/assets/images/home/siji.png" />
					<span>司机管理</span>
				</div>
				<div v-if="hasRole('121')" @click="goLink('carManagement/driverSupervision')">
					<img src="@/assets/images/home/jiandu.png" />
					<span>司机监督一览</span>
				</div>
				<div v-if="hasRole('121') ||hasRole('252')" @click="goLink('carManagement/numberLimitRuleList')">
					<img src="@/assets/images/home/xianhao.png" />
					<span>限号规则</span>
				</div>
				<div v-if="hasRole('121')" @click="goLink('carManagement/driverStatistics')">
					<img src="@/assets/images/home/sijiqingkuang.png" />
					<span>司机情况统计</span>
				</div>
				<div v-if="hasRole('120') ||hasRole('121') ||hasRole('252')"
					@click="goLink('carManagement/driverDuty')">
					<img src="@/assets/images/home/zhiban.png" />
					<span>司机值班</span>
				</div>
				<div v-if="hasRole('121')" @click="goLink('carManagement/drawOutVehicle')">
					<img src="@/assets/images/home/chuche.png" />
					<span>出车统计</span>
				</div>
				<div v-if="hasRole('121')" @click="goLink('carManagement/leave')">
					<img src="@/assets/images/home/qingjia.png" />
					<span>请假统计</span>
				</div>
				<div v-if="hasRole('121')" @click="goLink('carManagement/maintenance')">
					<img src="@/assets/images/home/weibao.png" />
					<span>维保统计</span>
				</div>
				<div v-if="hasRole('121')" @click="goLink('carManagement/monitoring')">
					<img src="@/assets/images/home/jiankong.png" />
					<span>车辆监控</span>
				</div>

			</div>
		</div>
	</div>
</template>

<script>
	import {
		listApplyRecord,
		countNotReadNum,
		countUnSignNum,
		getTodoNum
	} from "@/api/home.js"
	import {
		Toast
	} from 'vant';

	export default {
		name: 'HomePage',

		data() {
			return {
				roles: [],
				messageNum: 0,
				noticeNum: 0,
				waitApprovalNum: 0,
				getGoodsArr: [],
				user: []
			}
		},

		created() {
			this.user = JSON.parse(localStorage.getItem('user'))
			this.initData()
		},

		methods: {
			initData() {
				this.roles = this.user.roles?.split(',') || []
				this.getGoodsList()
				this.getWaitToDoNum()
			},

			hasRole(role) {
				return this.roles.includes(role)
			},

			getGoodsList() {
				try {
					listApplyRecord({
							openSessionId: this.user.openSessionId,
							applyState: 4,
							receiveType: 2
						})
						.then(res => {
							if (res.code == 200) {
								this.getGoodsArr = res.rows
							} else {
								Toast.error(res.message);
							}
						})
				} catch (err) {
					Toast.fail('商品列表请求错误')
				} finally {
					this.isLoading = false
				}
			},

			getWaitToDoNum() {
				try {
					countNotReadNum({
							openSessionId: this.user.openSessionId,
						})
						.then(res => {
							if (res.code == 200) {
								this.messageNum = res.data
							} else {
								Toast.error(res.message);
							}
						})
				} catch (err) {
					Toast.fail('获取消息请求错误')
				} finally {
					this.isLoading = false
				}
				try {
					countUnSignNum({
							openSessionId: this.user.openSessionId,
						})
						.then(res => {
							if (res.code == 200) {
								this.noticeNum = res.data
							} else {
								Toast.error(res.message);
							}
						})
				} catch (err) {
					Toast.fail('获取通知请求错误')
				} finally {
					this.isLoading = false
				}
				try {
					getTodoNum({
							openSessionId: this.user.openSessionId,
						})
						.then(res => {
							if (res.code == 200) {
								this.waitApprovalNum = res.data
							} else {
								Toast.error(res.message);
							}
						})
				} catch (err) {
					Toast.fail('获取待办请求错误')
				} finally {
					this.isLoading = false
				}
			},

			goGetGoodsDetail(e) {
				this.$router.push('/goodsRequisitionDetail/index?id=' + e.currentTarget.dataset.id)
			},

			goLink(url) {
				this.$router.push(`/${url}/index`)
			},

			goAnnunciate() {
				this.$router.push('/annunciate')
			},

			goGetGoodsDetail(id) {
				this.$router.push(`/goodsRequisitionDetail?id=${id}`)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	.top-part {
		position: relative;
		height: 166.5px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.bg {
		position: absolute;
		width: 100%;
		height: 166.5px;
		top: 0;
		left: 0;
	}

	.one {
		width: 167px;
		height: 90.5px;
		z-index: 1;
		position: relative;
		color: #333;
	}

	.mL30 {
		margin-left: 15px;
	}

	.mR30 {
		margin-right: 15px;
	}

	.v1 {
		position: absolute;
		z-index: 2;
		top: 10px;
		align-items: center;
		text-align: center;
		height: 100%;
		width: 100%;
	}

	.v2 {
		overflow: hidden;
		position: relative;
		z-index: 3;
	}

	.middleBg {
		width: 100%;
		height: 100%;
		// position: absolute;
		z-index: 2;
	}

	.miniBg {
		width: 41px;
		height: 41px;
	}

	.badge {
		position: absolute;
		width: 22px;
		height: 15px;
		line-height: 15px;
		background: #f33535;
		border-radius: 7.5px;
		color: #fff;
		text-align: center;
		top: 0;
		right: 22px;
		font-size: 13px;
		z-index: 2;
	}

	.notice {
		position: relative;
		z-index: 10;
		width: 320.5px;
		height: 16.5px;
		background: #ffffff;
		border: 1px solid #cccccc;
		border-radius: 7px;
		padding: 10px 12px;
		color: #333;
		font-size: 13px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 5px auto 12.5px;
	}

	.lingdang {
		width: 13px;
		height: 15px;
		margin-right: 8px;
	}

	.look {
		font-size: 13px;
		color: #f26060;
	}

	.sign {
		width: 311px;
		height: 51px;
		background: #3669f8;
		border-radius: 15px;
		font-size: 20px;
		color: #fff;
		text-align: center;
		line-height: 51px;
		margin: 12.5px auto 20px;
	}

	.apply-container {
		padding: 12.5px;
		background: #fff;
		margin-bottom: 12.5px;
	}

	.tit {
		font-size: 16px;
		font-weight: bold;
		display: block;
		margin-bottom: 25px;
		text-align: left;
	}

	.part {
		text-align: left;
	}

	.part div {
		width: 25%;
		display: inline-block;
		margin-bottom: 25px;
	}

	.part img {
		width: 43px;
		height: 43px;
		display: block;
		margin: 0 auto 7.5px;
	}

	.part span {
		display: block;
		font-size: 14px;
		text-align: center;
	}
</style>